import React, { Component } from 'react'
import { connect } from 'react-redux'

class VoiceStatus extends Component {
  renderPlaying() {
    const { info } = this.props
    if (info.type === 2) {
      return null
    }
    const { status } = this.props
    return status === 2 ? (
      <div className="playing">
       <img className="left" src={require('../../images/voice_icon.gif')} alt=""/>
        <div className="text">语音播放中</div>
      </div>
    ) : null
  }
  renderDownloading() {
    const { info } = this.props
    if (info.type === 2) {
      return null
    }
    const { status } = this.props
    return status === 1 ? (
      <div className="downloading">
        <div className="left"></div>
        <div className="text">语音下载中</div>
      </div>
    ) : null
  }
  renderWaiting() {
    const { info } = this.props
    if (info.type === 2) {
      return null
    }
    const { status, color_theme, showVideo, showMaterial, showMaterialVideo } = this.props
    const _className = color_theme === 'red' ? 'wait_voice red' : 'wait_voice'
    if (showVideo || (showMaterial && showMaterialVideo)) {
      return (
        <div className="playing">
          <img className="left" src={require('../../images/voice_icon.gif')} alt=""/>
          <div className="text">视频播放中</div>
        </div>
      )
    }
    if (showMaterial) {
      return(
        <div className="playing">
          <img className="left" src={require('../../images/voice_icon.gif')} alt=""/>
          <div className="text">语音播放中</div>
        </div>
      )
    }
    return status === 0 ? (
      <div className={_className}>
        <div className="left">
          <div className="inner delay1"> </div>
          <div className="inner delay2"> </div>
        </div>
        <div className="text">等待讲师录音</div>
      </div>
    ) : null
  }
  renderLiving() {
    const { info } = this.props
    return info.type === 2 ? (
      <div className="playing">
        <img className="left" src={require('../../images/voice_icon.gif')} alt=""/>
        <div className="text">直播中</div>
      </div>
    ) : null
  }
  render() {
    return (
      <div className="voice_status">
        {this.renderLiving()}
        {this.renderDownloading()}
        {this.renderPlaying()}
        {this.renderWaiting()}
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    status: state.LiveState.voiceStatus,
    color_theme: state.MainScreenState.info.color_theme,
    info: state.MainScreenState.info,
    showVideo: state.LiveState.showVideo,
    showMaterial: state.MaterialState.show,
    showMaterialVideo: state.MaterialState.showVideo
  }
}

export default connect(mapStateToProps)(VoiceStatus)
